<template>
  <div class="app-container" style="width:100%">
    <div class="head-container">
      <el-date-picker v-model="query.date" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
      <el-time-picker v-model="query.time" value-format="HH:mm:ss" is-range range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"></el-time-picker>
      <el-button type="warning" size="mini" icon="el-icon-search" @click="search">查询</el-button>
      <el-button type="primary" size="mini" @click="animationStart">开始移动</el-button>
    </div>
    <div class="map">
      <map-gis ref="map" @init="mapInit" />
    </div>
  </div>
</template>

<script>
import MapGis from '@/components/MapGis'
import { getGpsPath } from '@/api/particle'
import coordtransform from 'coordtransform'
export default {
  name: '',
  components: { MapGis },
  data() {
    return {
      coordtransform,
      gpsPathList: [],
      marker: null,
      query: {
        date: '',
        time: null
      },
      img: ''
    }
  },
  created() {},
  beforeCreate() {
    this.map && this.map.destroy()
  },
  beforeDestroy() {
    this.map && this.map.destroy()
  },
  methods: {
    search() {
      if (!this.query.date || !this.query.time) {
        return
      }
      this.map && this.map.destroy()
      this.$refs.map.aMapoader()
    },
    async mapInit(AMap, map) {
      if (!this.query.date || !this.query.time) {
        return
      }
      const params = {
        start_ts: new Date(this.query.date + ' ' + this.query.time[0]).getTime(),
        end_ts: new Date(this.query.date + ' ' + this.query.time[1]).getTime(),
        eq_code: 'JF21S010066'
      }
      const gpsPathList = await getGpsPath(params)
      if (gpsPathList.length === 0) return
      this.gpsPathList = gpsPathList.map((item) => {
        return this.coordtransform.wgs84togcj02(item.longitude, item.latitude)
      })
      const { Marker, Polyline, plugin, Pixel } = AMap
      plugin('AMap.MoveAnimation', () => {
        this.marker = new Marker({
          map: map,
          position: this.gpsPathList[0],
          offset: new Pixel(-30, -80),
          autoRotation: true,
          icon: this.img
        })
        new Polyline({
          map,
          path: this.gpsPathList,
          showDir: false,
          strokeColor: '#28F',
          strokeWeight: 6, // 线宽
          strokeStyle: 'solid',
          icon: this.img,
          strokeOpacity: 1
        })
        const passedPolyline = new Polyline({
          map,
          strokeColor: '#28F',
          strokeWeight: 6 // 线宽
        })
        this.marker.on('moving', (e) => {
          passedPolyline.setPath(e.passedPath)
        })
        map.setFitView()
      })
    },
    animationStart() {
      this.marker.moveAlong(this.gpsPathList, {
        duration: 500,
        autoRotation: false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  height: 780px;
}
#map-container {
  width: 100%;
  height: 100%;
}
</style>

<style lang="scss">
#map-container {
  .amap-copyright,
  .amap-logo {
    display: none !important;
  }

  .amap-marker-label {
    border: unset;
    background: unset;
    color: white;
    cursor: pointer;
  }
}
</style>
